<template>
  <div :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <div
      class="market-countDown"
      :style="{ borderRadius: outModuleCss.borderRadius }"
    >
      <div class="countdown-img">
        <img
          v-if="propsData.params.countDownImg"
          :src="propsData.params.countDownImg"
          alt=""
        />
        <img
          class="default-img"
          v-else
          src="@/assets/images/diy/default_img.png"
          alt=""
        />
      </div>
      <div
        class="countdown-content"
        :style="propsData.moduleCss.useBackground ? propsData.moduleCss : ''"
      >
        <div
          class="template-default"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 1"
        >
          <h4 :style="propsData.params.css">距开始:</h4>
          <div class="countDown-box">
            <p class="time-box" :style="countDownBgColor">
              <span :style="countDownFontColor">59</span>
            </p>
            <p class="time-split" :style="countDownFontColor">:</p>
            <p class="time-box" :style="countDownBgColor">
              <span :style="countDownFontColor">59</span>
            </p>
            <p class="time-split" :style="countDownFontColor">:</p>
            <p class="time-box" :style="countDownBgColor">
              <span :style="countDownFontColor">59</span>
            </p>
          </div>
        </div>
        <div
          class="template-padding"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 2"
        >
          <div class="template-box">
            <h4 :style="propsData.params.css">距开始:</h4>
            <p class="time-box" :style="countDownFontColor">59 : 59 : 59</p>
          </div>
        </div>
        <div
          class="template-day"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 3"
        >
          <div class="template-box">
            <h4 :style="propsData.params.css">距开始:</h4>
            <p class="time-box">
              <span :style="templateDaySet">10</span>
              天
              <span :style="templateDaySet">10</span>
              小时
              <span :style="templateDaySet">10</span>
              分
              <span :style="templateDaySet">10</span>
              秒
            </p>
          </div>
        </div>
        <div
          class="template-time"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 4"
        >
          <div class="template-box">
            <h4 :style="propsData.params.css">距开始:</h4>
            <p class="time-box" :style="countDownFontColor">10: 23: 31</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";

export default {
  name: "countDown",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  data() {
    return {};
  },
  mounted() {
    console.log("组件挂载了：", this.propsData);
  },
  watch: {},
  computed: {
    countDownBgColor() {
      return { backgroundColor: this.propsData.params.countDownBgColor };
    },
    countDownFontColor() {
      return { color: this.propsData.params.countDownFontColor };
    },
    templateDaySet() {
      return {
        backgroundColor: this.propsData.params.countDownBgColor,
        color: this.propsData.params.countDownFontColor,
      };
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.market-countDown {
  width: 100%;
  // background-color: #ffffff;
  overflow: hidden;
  .countdown-img {
    width: 100%;
    height: 132px;
    background: #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
    .default-img {
      width: 73px;
      height: 56px;
      display: block;
    }
  }
  .countdown-content {
    width: 100%;
    height: 44px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    .template-default {
      width: 100%;
      padding: 0 12px;
      display: flex;
      align-items: center;
      h4 {
        font-size: 16px;
        font-family: PingFang SC;
        color: #000000;
        margin-bottom: 0;
        margin-right: 5px;
      }
      .countDown-box {
        display: flex;
        align-items: center;
        .time-box {
          margin-bottom: 0;
          width: 20px;
          height: 20px;
          background-color: #fa2c1b;
          border-radius: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
        .time-split {
          width: 12px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 0;
          line-height: 20px;
          font-weight: bold;
        }
      }
    }
    .template-padding {
      height: 24px;
      background: #ffffff;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 12px;
      .template-box {
        height: 24px;
        border-radius: 60px;
        border: 1px solid #fa2c1b;
        padding-right: 10px;
        display: flex;
        align-items: center;
      }
      h4 {
        width: 68px;
        height: 24px;
        background: #fa2c1b;
        border-radius: 20px 0px 0px 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
      }
      .time-box {
        padding-left: 10px;
        color: #fa2c1b;
        margin-bottom: 0;
      }
    }
    .template-day,
    .template-time {
      height: 24px;
      // background: #ffffff;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 12px;
      .template-box {
        display: flex;
        align-items: center;
        h4 {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          margin-right: 5px;
          margin-bottom: 0;
        }
        .time-box {
          display: flex;
          align-items: center;
          margin-bottom: 0;
          p {
            margin-bottom: 0;
          }
          span {
            width: 20px;
            height: 20px;
            background: #fa2c1b;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            margin: 0 4px;
          }
        }
      }
    }
    .template-time .template-box {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fa2c1b;
      margin-bottom: 0;
    }
  }
}
</style>
